<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <PageHeader
      :title="title"
      :subtitle="subtitle"
      :icon="icon"
    />

    <!-- 操作工具栏 -->
    <PageToolbar v-if="showToolbar">
      <template #left>
        <slot name="toolbar-left"></slot>
      </template>
      <template #right>
        <slot name="toolbar-right"></slot>
      </template>
    </PageToolbar>

    <!-- 主要内容区域 -->
    <div class="page-content">
      <slot name="content"></slot>
    </div>

    <!-- 对话框插槽 -->
    <slot name="dialogs"></slot>
  </div>
</template>

<script setup lang="ts">
import PageHeader from '@/components/PageHeader.vue'
import PageToolbar from '@/components/PageToolbar.vue'

interface Props {
  title: string
  subtitle?: string
  icon?: string
  showToolbar?: boolean
}

withDefaults(defineProps<Props>(), {
  subtitle: '',
  icon: 'fa fa-cog',
  showToolbar: true
})
</script>

<style lang="scss" scoped>
.page-container {
  background: linear-gradient(135deg, #0f1327 0%, #1a2332 100%);
  min-height: 100vh;
  color: #e6e6e6;
  padding: 20px 20px 80px 20px; /* 增加底部内边距避免被footer遮挡 */
}

.page-content {
  margin-top: 20px;
}
</style>
